.coinTran {
  color:  $light-grey-color;
  transition:all 0.3s linear
  .trade-center {
      padding: 10px 30px 20px;
      //width: auto;
      min-width: 1160px;
      max-width: 1920px
      width: 100%;
      box-sizing: border-box;
  }
  .item-block {
    background: $sub-background-color
  }
  .left-sidebar {
    float: left;
    width: 260px;
  }
  .right-main {
    position: relative;
    width:calc(100% - 265px)
    float:left;
    padding-left: 5px;
    height: 1379px;
  }
  .center-column {
    float: left;
    width:calc(100% - 265px)
    margin-right: 5px;
    position: relative;
  }
  .right-column {
    width: 260px;
    float: right;
  }
  .infor-bar {
    position: relative;
    margin-bottom: 5px;
    font-size: 12px;
    .tr-top{
      height:36px;
      td{
        text-align: center;
        vertical-align: middle;
        height: 50px;
        font-size: 14px;
        &.tr-top-title {
          width: 236px;
          .symbolsCurrent{
            position: relative;
            padding-top:0;
            font-size: 20px;
            font-weight: 600;
            font-family: PingFangSC-Semibold;
            img {
              vertical-align: middle;
              width: 28px;
              height: 28px;
            }
            /*.area{
              position: absolute;
              right: -10px;
              top: 0;
              padding: 3px 5px;
              background: #FF9C00;
              color: $white-color;
              font-size: 12px;
              line-height: 14px;
              border-radius: 12px;
            }*/
          }
          .area{
            display: inline-block;
            line-height: 14px;
            transform: translateY(-10px);
            padding: 3px 5px;
            border-radius: 12px;
            font-size: 12px;
            background: #FF9C00;
            color: $white-color;
          }
        }
        &.tr-new-price {
          padding-left: 1px;
          .tt-coin-price{
            color: $buy-color;
            font-size: 18px;
          }
          s{
            width: 100%;
            font-size: 14px;
          }
        }
        .icon-down{margin-left: 5px;}
        .tt-coin-price,
        .itemDes{
          display: inline-block;
          width: 100%;
          line-height: 25px;
        }
        &.current{
          min-width: 100px;
          .coinDes{
            color: $coin-des-text-color;
            i{
              margin-right: 8px;
            }
          }
        }
      }
    }
    .symbolInfo{
      position: absolute;
      padding-top: 20px;
      left: 5px;
      top: 40px;
      width: 600px;
      height: 410px;
      word-break: break-all;
      z-index: -1;
      transition: all .3s;
      opacity: 0;
      &::before{
        position: absolute;
        left: 65px;
        top: 0;
        content: '';
        border-width: 10px;
        border-color: transparent transparent $base-background-color transparent;
        border-style: solid;
      }
      .symbolInfo-cont{
        font-family: PingFangSC-Semibold;
        box-sizing: border-box;
        padding: 30px 30px 10px 30px;
        background: $base-background-color;
        box-shadow: $box-shadow-style1;
        h3 {
          font-size: 20px;
          line-height: 20px;
          margin-bottom: 10px;
        }
        p {
          letter-spacing: 1px;
          font-size: 12px;
          padding-bottom: 13px;
          line-height: 20px;
          border-bottom: 1px solid $login-input-border-bottom;
          white-space: normal;
          color: $unimportant-font-color2;
          &.url1,
          &.url2,
          &.url3{
            color: $blue-font-color;
          }
          &.url3{
            border-bottom: none;
          }
        }
        h6{
          line-height: 20px;
          margin-bottom: 10px;
          margin-top: 12px;
          color: $unimportant-font-color1;
        }
      }
    }
  }
  .tr-list {
    li {
      position: relative;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      span {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        z-index: 2;
        &.tr-mName,
        &.tr-mPrice,
        &.tr-mZdvol {
          float: left
        }
      }
      &.selected,
      &:hover {
        background: $list-hover-background;
        color: $blue-font-color;
      }
    }
  }
  .tr-side-userMsg {
    height: 74px;
    padding-left: 30px;
    background: $heade-background-color;
    border-bottom: 1px solid $base-background-color;
    font-size: 12px;
    line-height: 16px;
    .login-userMoney {
      p {
        padding: 15px 0 10px;
        font-size: 14px;
      }
      .rmb {
        display: inline-block;
        font-size: 12px;
        color: $explain-font-color;
      }
      .base-assets {
        padding: 0;
        font-size: 16px;
      }
    }
    .user-noLogin {
      padding-top: 30px;
      display: block;
      text-align: center;
    }
  }
  .myMarket-star,
  .bz-table-icon {
    display: inline-block;
    width: 15px;
    height: 16px;
    background: url("../img/bz-sprite.png") no-repeat;
    vertical-align: middle;
    margin-right: 4px;
    position: relative;
    top: -2px;
    cursor: pointer;
  }
  .myMarket-star {
    background-position: -4px -167px;
  }
  .market-title-box {
    // background: $heade-background-color;
    // border-top: 1px solid $border-blue-color;
    padding: 0 15px 0;
    position: relative;
    .slide-btn {
      position: absolute;
      top: 4px;
      height: 21px;
      line-height: 21px;
      width: 21px;
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      opacity: 0.2;
      &.icon-left {
        left: 2px;
      }
      &.icon-right {
        right: 2px;
      }
      &.cur {
        color: $blue-font-color;
        opacity: 1;
        &:hover {
          background: $blue-font-color
          color: $white-color
        }
      }

    }
  }
  .market-title-bar {
    position: relative;
    margin-bottom: 15px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-align: left;
  }
  .market-title {
    width: max-content;
    white-space: nowrap;
    position: absolute;
    top:0;
    left: 0;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
  }
  .market-title li {
    position: relative;
    display: inline-block;
    padding: 0 11px;
    // border-bottom: 3px solid rgba(0,0,0,0);
    cursor: pointer;
    color: $important-font-color;
    &::after{
      position: absolute;
      content: '';
      width: 30px;
      height: 3px;
      left: 50%;
      bottom: 0;
      background: rgba(0,0,0,0);
      transform: translate(-50%);
    }
  }
  .market-title li:hover {
    color: $blue-font-color;
  }
  .market-title li.selected {
    color: $blue-font-color;
    background: $sub-background-color
    &::after{
      background: $blue-font-color;
    }
  }

  .myMarket {
    // float: left;
  }
  .market-list {
    border-bottom: 1px solid $base-background-color;
    font-size: 12px;
    line-height: 25px;
  }
  .search-symblo {
    padding: 15px;
    cursor: pointer;
    position: relative;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color:  $important-font-color;
  }
  .search-symblo .searchSpan{
    display: block;
    width: 40px;
    height: 30px;
    position: absolute;
    right: 16px;
    top: 15px;
    background: $btn-bg-color;
  }
  .search-symblo .searchSpan .icon-search {
    position: absolute;
    right: 10px;
    top: 6px;
    font-size: 18px;
    color: $white-color;
  }
  .market-list span {
    display: inline-block;
    text-align: center;
    height: 15px;
    font-size: 12px;
  }
  .market-list span .sort {
    position: relative;
    display: inline-block;
    height: 15px;
    width: 14px;
    vertical-align: middle;
    font-size: 10px;
    i {
      display:block;
      line-height:0;
      border-style:solid;
      border-width:1px;
      position: absolute;
      width: 5px;
      height: 5px;
      left: 3px;
      &.iconNoFont-sup {
        border-color: $explain-font-color $explain-font-color rgba(0,0,0,0) rgba(0,0,0,0) ;
        transform: rotateZ(-45deg)
      }
      &.iconNoFont-sdow {
        border-color: rgba(0,0,0,0) rgba(0,0,0,0) $explain-font-color $explain-font-color;
        bottom: 3px;
        transform: rotateZ(-45deg)
      }
    }
    &.selected {
      .iconNoFont-sup.cur {
        border-color: $blue-font-color $blue-font-color rgba(0,0,0,0) rgba(0,0,0,0);
      }
      .iconNoFont-sdow.cur {
        border-color: rgba(0,0,0,0) rgba(0,0,0,0) $blue-font-color $blue-font-color;
      }
    }

  }
  .search-symblo input {
    float: right;
    padding-right: 40px;
    width: 110px;
    background: $input-background;
    border-radius: 2px;
    text-indent: 8px;
    height: 28px;
    line-height: 28px;
    text-align: left;
  }
  .search-symblo input::-webkit-input-placeholder{
    color: $placeholder-color;
  }
  .market-list .name {
    width: 17%;
    padding-left: 48px;
    text-align: left;
  }
  .market-list .tr-mPrice {
    width: 30%;
    text-align: right;
    cursor:pointer;
  }
  .market-list .tr-mZdvol {
    width: 30%;
    text-align: right;
    position: relative;
    cursor: pointer;
  }
  .market-list .tr-mZdvol .rose_icon {
    display: inline-block;
    height: 24px;
    width: 24px;
    vertical-align: middle;
    background: url('../img/rose_icon.png') no-repeat 12px 5px;
  }
  .market-list .type-more {
    position: absolute;
    width: 64px;
    background: $base-background-color;
    text-align: left;
    line-height: 22px;
    right: -3px;
    top: 20px;
    border: 1px solid $base-background-color;
    border-right: none;
    z-index: 6;
    padding-top: 5px;
  }
  .market-list .type-more s {
    display: inline-block;
    padding-left: 10px;
  }
  .market-list .type-more s:hover {
    color:$blue-font-color;
  }
  .market-box {
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    font-size: 12px;
    li {
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
      text-align: left;
      .tr-mName {
        cursor: pointer;
        width: 30%;
        text-align: left
        i {
          margin-right: 16px;
          color:$explain-font-color;
          font-size: 14px;
          position:relative;
          top:-1px;
          vertical-align:middle;
        }
        .select-mini {
          color: $selected-star-color;
        }
        .selected {
          background-position: -4px -167px;
        }
      }
      .tr-mPrice {
        width: 33%;
        cursor:pointer
        text-align: right;
      }
      .tr-mPrice .show-hover {
        display: none;
      }
      .tr-mPrice:hover .show-hover {
        display: inline-block;
      }
      .tr-mPrice:hover .show-def {
        display: none;
      }
      .tr-mZdvol {
        width: 30%;
        text-align: right;
        padding: 0 0 0 5px;
      }
    }
  }

  /* 深度合并 样式
   * ==========================================================================================
   * ==========================================================================================
   */
  .depth-block{
    font-size: 12px;
    .right-tabs{
      padding: 10px 10px 0 10px;
      height: 26px;
      .switch-list {
        float: left;
        width: 110px;
        span {
          float: left;
          width: 26px;
          height: 17px;
          border: 1px solid #8c9eb3;
          margin-left: 4px;
          cursor: pointer;
          text-align: center;
          line-height: 20px;
          margin-top: -1px;
          &.switch-red {
            color: $sell-color;
          }
          &.switch-blue {
            color: $buy-color;
          }
          &.selected {
            border: 1px solid $blue-font-color;
          }
          s{
            display: inline-block;
            width: 12px;
            height: 2px;
            &.path1{
              transform: translateY(-8px);
              background: $sell-color;
            }
            &.path2{
              transform: translateY(-20px);
              background: $buy-color;
            }
          }
        }
      }
      .switch-depth {
        float: right;
        color: $unimportant-font-color2;
        select {
          width: 87px;
          background: $base-background-color;
          color: $base-font-color;
          border: 1px solid $base-background-color;
        }
      }
    }

    .tr-newPrice {
      height: 45px;
      line-height: 45px;
      text-indent: 15px;
      text-align: left;
      border-top: 1px solid $table-border-color;
      border-bottom: 2px solid $table-border-color;
      font-size: 18px;
      clear: both;
      i {
        font-size: 16px;
      }
      span{
        margin-right: 10px;
      }
      .closeData{
        font-size: 18px;
        font-weight: 600;
      }
      .closePrice{
        font-size: 12px;
      }
      .roseData{
        font-size: 14px;
      }
    }
    .depth-list {
      li {
        height: 27px;
        &.tr-list-title {
          height: 27px;
          line-height: 24px;
          color: $unimportant-font-color2;
          .tr-mPrice {
            padding-left: 16px;
            width: 28%;
          }
        }
        span {
          float: left;
          height: 27px;
          line-height:27px;
          overflow: hidden;
          padding-left: 5px;
          &.tr-mPrice {
            width: 28%;
            padding-left: 16px;
            cursor: pointer;
            .show-type {
              display: inline-block;
              width: 35px;
              position: absolute;
              left: 10px;
            }
            .show-hover {
              display: none;
            }
            &:hover {
                .show-def {
                  display: none;
                }
                .show-hover {
                  display: inline-block;
                }
            }
          }
          &.tr-mName {
            width: 30%;
            text-align: right;
          }
          &.tr-mZdvol {
            width: 27%;
            text-align: right;
            padding-left: 5px;
          }
          &.tr-bg {
            position: absolute;
            height: 27px;
            top: 0;
            right: 0;
            z-index: 1;
            opacity: 0.16;
            background: $sell-color;
            padding: 0;
            width: 0;
            transiton: width 0.5s ease;
            -webkit-transition: width 0.5s ease;
          }
        }
      }
    }
    .depth-sell , .depth-buy {
      transition: all 0.5s 0s;
      overflow: hidden;
      height:343px;
      position: relative;
      .buy-bar, .sell-bar {
        height: 360px;
      }
    }
    .depth-sell .sell-bar {
      position: absolute;
      left:0;
      width: 100%;
      bottom: 0;
    }
    .depth-sell.showSell ul {
      // height: 720px;
      transition: all 0.5s 0s;
      overflow: hidden;
      position: relative;
    }
    .depth-buy li span.tr-bg {
      background: $buy-color;
    }

    .showSell {
      height: 687px;
      transition: all 0.5s 0s;
      overflow: hidden;
      .buy-bar, .sell-bar {
        height: 720px;
      }
    }
    .hideHieght {
      height: 0;
      transition: all 0.5s 0s;
    }

  }
  /* 交易办款 样式
   * ==========================================================================================
   * ==========================================================================================
   */
  .transaction-block {
    position: relative;
    font-size:  12px;
    .errorText {
      color: $red-color
    }
    .transaction-tabs {
      padding-top: 10px;
      padding-left: 20px;
      height: 30px;
      line-height: 30px;
      z-index: 2;
      li {
        position: relative;
        float: left;
        height: 100%;
        text-align: center;
        cursor: pointer;
        font-size: 16px;
        margin-right: 25px;
        &::after{
          position: absolute;
          content: '';
          left: 50%;
          bottom: 0;
          width: 30px;
          height: 3px;
          transform: translateX(-50%);
        }
        &.selected {
          &::after{
            background: $blue-font-color;
          }
        }
      }
      .hoverBtn{
        float: right;
        min-width: 260px;
        height: 30px;
        margin-right: 17px;
        .cancelOrderBtn,
        .rebateBtn,
        .rateBtn{
          position: relative;
          float: right;
          padding: 0 20px;
          min-width: 78px;
          height: 28px;
          margin-left: 10px;
          border: 1px solid $border-blue-color;
          font-size: 12px;
          .hoverDiv{
            position: absolute;
            right: 0;
            top: 38px;
            width: 240px;
            max-height: 0;
            overflow: hidden;
            box-shadow: $box-shadow-style1;
            background: $base-background-color;
            text-align: left;
            transition: all .5s;
            div{
              padding: 15px;
              line-height: 20px;
              color: $font-color666;
              .takerP{
                magin-bottom: 10px;
              }
              .hoverDiv_span{
                font-size: 14px;
                font-weight: 600;
              }
            }
          }
        }
        .cancelOrderBtn{
          margin-left: 0;
        }
      }
    }
    .transaction-content {
      position: relative;
      z-index: 1;
      padding: 0 0 10px 0;
      p {
        font-size: 12px;
        .t-title {
          font-size: 16px;
          font-weight: 600;
          .thisSymbolA {
            margin-right: 5px;
            color: $base-font-color;
          }
        }
        .transaction-money {
          float: right;
        }
        label {
          display: inline-block;
          width: 55px;
          text-align: right;
          line-height: 24px;
        }
      }
      .transaction-title{
        padding: 12px 0 10px;
        height: 22px;
        line-height: 22px;
      }
      .transaction-input {
        input {
          height: 33px;
          margin-right: 5px;
          width: 100%;
          text-indent: 5px;
        }
      }
      .disCountPrice{
        height: 18px;
        line-height: 18px;
        padding: 5px 0;
      }
      .transaction-treadNum{
        padding: 10px 0 0;
      }
      .transaction-sj {
        text-align: center;
        color: $aaa;
        font-size:14px;
      }
      .transaction-drag{
        // padding: 0;
      }
      .transaction-button {
        position: relative;
        margin-top: 25px;
        padding: 0;
        height: 48px;
        .button {
          position: absolute;
          left: 50%;
          width: 50%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 18px;
          cursor: pointer;
          opacity: 0.8;
          display: block;
          cursor: pointer;
          border-radius: 25px;
          transform: translateX(-50%);
        }
        .button-pass {
          display: block;
          input {
            height: 27px;
            line-height: 28px;
            width: 200px;
            text-indent: 5px;
          }
        }
        .button-more {
          display: block;
          width: 100%;
          height: 20px;
          line-height: 20px;
          margin-top: 10px;
          .nopass {
            float: right;
          }
        }
      }

      .transaction-buy,
      .transaction-sell {
        float: right;
        width: 49.9%;
        padding: 0 20px;
        height: 287px;
        color: $unimportant-font-color1;
        box-sizing: border-box;
        .disabled_button {
          // cursor: no-drop;
          background: rgba(0, 0, 0, 0.3);
        }
        .login_link {
          color: $blue-font-color;
        }
      }
      .transaction-buy {
        border-right: 1px solid $border-blue-color;
        float: left;
      }
    }
    .transaction-drag {
      position: relative;
      width: calc(100% - 18px);
      height:20px;
    }
    .drag-def,
    .drag-cover {
      position: absolute;
      display: block;
      height: 1px;
      // top: 22px;
      left: 4px;
    }
    .drag-def {
      width: 100%;
      background: $border-blue-color;
    }
    .drag-cover {
      background: $input-focus-border;
    }
    .drag-turnColor {
      background: $input-focus-border;
    }
    .drag-step {
      position: absolute;
      left: 0%;
      top: -7px;
      display: block;
      border: 1px solid $blue-font-color;
      border-radius: 100%;
      height:17px;
      width:17px;
      cursor: pointer;
      z-index:5;
      &.transition {
        transition: all .5s ease;
      }
      &:after {
          content: '';
          position: absolute;
          background: $blue-font-color;
          width: 11px;
          height: 11px;
          border-radius:100%;
          top: 3px;
          left: 3px;
      }
    }
    .transaction-drag i {
      background: $border-blue-color;
      position: absolute;
      top: 8px;
      display: block;
      width: 10px;
      height: 10px;
      cursor: pointer;
      z-index: 4;
      border-radius: 50%;
    }
    .transaction-drag i.selected {
      background: $input-focus-border
    }
    .transaction-drag i.drag-stepx {
      left: 4px;
    }
    .transaction-drag i.drag-step0 {
      left: calc(25% + 4px);
    }
    .transaction-drag i.drag-step1 {
      left: calc(50% + 4px);
    }
    .transaction-drag i.drag-step2 {
      left: calc(75% + 4px);
    }
    .transaction-drag i.drag-step3 {
      left: calc(100% + 4px);
    }
    .drag-step-wrap {
      display: inline-block;
      width: 100%;
      position: relative;
    }
  }
  /* 最新成交板块 样式
   * ==========================================================================================
   * ==========================================================================================
   */
  .side-newDel {
    margin-top: 5px;
    .newDel-title{
      height: 30px;
      line-height: 28px;
      padding: 10px 0;
      padding-left: 20px;
      span {
        display: inline-block;
        font-size: 16px;
      }
    }
    .market-box, .newDel-box {
      height: 858px;
      overflow-x: hidden;
      overflow-y: auto;
      position: relative;
      z-index: 1;
    }
    .newDel-list {
      font-size: 12px;
      li {
        height 34px;
        span {
          height: 34px;
          line-height:33px;
          overflow: hidden;
        }
        .tr-mName {
          width:25%;
          padding-left: 15px;
          text-align: center;
        }
        .tr-mPrice{
          width: 32%;
          cursor: pointer;
          text-align: right;
          .show-hover {
            display: none;
          }
          &:hover {
            .show-def {
              display:none;
            }
            .show-hover {
              display: inline-block;
          }
          }
        }
        .tr-mZdvol {
          width:32%;
          text-align: right;
        }
      }
    }
  }
  /*  K线图 样式 */
  .charts-block {
    margin-bottom: 5px;
    font-size: 12px;
    height: 455px;
    position: relative;
    overflow: hidden;
    .tabs-chart {
      position: absolute;
      right: 0;
      top: 0;
      text-align: right;
      z-index: 99;
      line-height: 30px;
      span {
        display: inline-block;
        margin: 0 5px;
        cursor: pointer;
        &.selected {
          color: $blue-font-color;
        }
      }
    }
    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transition: all .5s ease;
      overflow: hidden;
      height: 100%;
      z-index: 2;
      &.selected {
        transform: translateX(0%);
        opacity: 1;
        z-index: 3;
      }
    }
  }
  .bottom-column{
    position: absolute;
    bottom: 0;
    left: 5px;
    width: calc(100% - 5px);
    height: 522px;
    margin-top: 5px;
  }
  #kline-loading {
    position: absolute;
    background: $sub-background-color;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    .bar {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3D(-50%, -50%, 0);
    }
  }
  .echart-box {
    width 99%;
  }
  .no-data {
    text-align: center;
    padding-top: 15px;
  }
  .coverKlineBox {
    position: absolute;
    top: 30px;
    left:0;
    right: 0;
    bottom: 0;
  }
  .flip-list-move {
    transition: transform 0.6s;
  }
  .no_drop {
    cursor: no-drop;
  }
}
//  页面动画
.fade-enter-active, .fade-leave-active {
  transition: opacity .8s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}






























